<template>
	<div>
		<el-table :data="dataList" :row-style="{ height: '45px' }"
			:cell-style="{ padding: '0 ', 'text-align': 'center' }" :header-cell-style="{
        'text-align': 'center',
        color: '#606266',
        'background-color': '#F8F8F9',
      }" width="100%" ref="dataTable" @selection-change="handleSelectionChange" :max-height="maxHeight"
			:tree-props="treeProps" :row-key="rowKey">
			<el-table-column v-for="(item, index) in tableProps" :key="index" :label="item.label" :prop="item.prop"
				:width="item.width" :type="item.type" :fixed="item.fixed">
				<!-- 头像 -->
				<template v-if="item.type == 'avatar'" v-slot="scope">
					<el-avatar v-if="scope.row[item.prop]" :src="
              scope.row[item.prop].includes('http')
                ? scope.row[item.prop]
                : scope.row[item.prop]
            "></el-avatar>
				</template>
				<!-- 图片 -->
				<template v-else-if="item.type == 'pictures'" v-slot="scope">
					<div v-if="scope.row[item.prop] != null && scope.row[item.prop] != ''">
						<div>
							<template v-if="getPicturesValue(scope.row[item.prop]).length > 1">
								共{{getPicturesValue(scope.row[item.prop]).length}}张
							</template>
							<el-image :src="getPicturesValue(scope.row[item.prop])[0]"
								:preview-src-list="getPicturesValue(scope.row[item.prop])"
								:fit="item.fit?item.fit:'fill'"></el-image>
						</div>
					</div>
				</template>
				<!-- icon -->
				<template v-else-if="item.type == 'icon'" v-slot="scope">
					<div v-if="scope.row[item.prop] != null && scope.row[item.prop] != ''">
						<i :class="scope.row[item.prop]" style="font-size:20px"></i>
					</div>
				</template>
				<!-- 长文本 -->
				<template v-else-if="item.type == 'longText'" v-slot="scope">
					<el-popover placement="top-start" width="200" trigger="hover" :content="scope.row[item.prop]">
						<div class="ellipsis" slot="reference">
							{{ scope.row[item.prop] }}
						</div>
					</el-popover>
				</template>

				<!-- switch开关 -->
				<template v-else-if="item.type == 'switch'" v-slot="scope">
					<el-switch v-model="scope.row[item.prop]" :active-value="item.active"
						:inactive-value="item.inactive"
						@change="statusChangeMethod(scope.row, item.prop, item.active, item.inactive)">
					</el-switch>
				</template>

				<!-- json -->
				<template v-else-if="item.type == 'json'" v-slot="scope">
					<el-popover placement="top-start" width="370" trigger="hover">
						<json-viewer :value="scope.row[item.prop]" :expand-depth="4" copyable sort></json-viewer>
						<div class="ellipsis" slot="reference">
							{{ scope.row[item.prop] }}
						</div>
					</el-popover>
				</template>

				<!-- tagList -->
				<template v-else-if="item.type == 'tagList'" v-slot="scope">
					<div v-for="(re, reIndex) in scope.row[item.prop]" :key="reIndex"
						style="margin-top:1px;margin-bottom:1px">
						<el-tag :type="item.tagType?'':scope.row[item.tagType]">
							{{ re }}
						</el-tag>
					</div>
				</template>
				<!-- tag -->
				<template v-else-if="item.type == 'tag'" v-slot="scope">
					<div v-for="(re, reIndex) in item.result" :key="reIndex">
						<el-tag v-if="scope.row[item.prop] == re.code" :type="re.type">
							{{ re.text }}
						</el-tag>
					</div>
				</template>
				<!-- tagDict -->
				<template v-else-if="item.type == 'tagDict'" v-slot="scope">
					<DictTag :options="item.result()" :value="scope.row[item.prop]"></DictTag>
				</template>

				<!-- 预览 -->
				<template v-else-if="item.type == 'yulan'" v-slot="scope">
					<el-button v-if="$common.isNotBlank(scope.row[item.prop])" type="success" plain
						 @click="yulanShowClick(scope.row[item.prop])">查看</el-button>
				</template>
				<!-- 复制 -->
				<template v-else-if="item.type == 'copy'" v-slot="scope">
					<div v-clipboard:copy="scope.row[item.prop]">
						{{scope.row[item.prop]}}
					</div>
				</template>
				<!-- 默认 -->
				<template v-else v-slot="scope">
					<div>
						{{scope.row[item.prop]}}
					</div>
				</template>
			</el-table-column>
			<!-- 操作按钮 -->
			<slot name="table_oper" />
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="pageData.pageNumber" :page-sizes="[10,20,30,50]" :page-size="pageData.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageData.total" background>
		</el-pagination>

		<YwYulan ref="ywYulanRef"></YwYulan>
	</div>
</template>
<script>
	export default {
		name: "YwTable",
		created() {},
		props: {
			searchData: {
				type: Object,
				default: {

				}
			},
			treeProps: {

			},
			rowKey: {
				default: "id"
			},
			//查询事件
			api: {
				type: String,
				required: true,
				default: null,
			},
			//表格参数配置
			tableProps: {
				type: Array,
				default () {
					return [];
				},
			},
		},
		data() {
			return {
				pageData: {
					pageNumber: 1,
					pageSize: 10,
					total: 0
				},
				dataList: [],
				maxHeight: null
			};
		},
		methods: {
			shuaxin(params) {
				if (params) {
					this.searchData = params
				}
				this.pageData.pageNumber = 1
				this.findAllByPage()
			},
			refreshSize(size) {
				//暂时支持刷新高度
				this.maxHeight = document.body.clientHeight - 50 - 40 - 5 - parseInt(size.height)
			},
			findAllByPage() {
				if (this.$common.isBlank(this.api)) {
					return
				}

				this.searchData.pageNumber = this.pageData.pageNumber
				this.searchData.pageSize = this.pageData.pageSize

				this.$api[this.api](this.searchData).then((result) => {
					this.dataList = result.records
					this.pageData.total = result.total
				})
			},
			//框选中
			handleSelectionChange(val) {
				this.$emit("handleSelectionChange", val);
			},
			//页条改变
			handleSizeChange(val) {
				this.pageData.pageSize = val;
				//调用接口
				this.shuaxin();
			},
			//页码改变
			handleCurrentChange(val) {
				this.pageData.pageNumber = val;
				//调用接口
				this.findAllByPage();
			},
			//表格内状态改变
			statusChangeMethod(val, prop, active, inactive) {
				this.$confirm("确定更改状态?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						await this.$emit("handleSwitchChange", val, prop);
					})
					.catch(() => {
						val[prop] == active ? (val[prop] = inactive) : (val[prop] = active);
					});
			},
			yulanShowClick(content) {
				this.$refs.ywYulanRef.open({
					title: "预览内容",
					content: content
				})
			},
			getPicturesValue(pictures) {
				if (pictures.constructor == Array) {
					return pictures
				} else {
					if (pictures.indexOf(",") == -1) {
						return [pictures]
					} else {
						return pictures.split(",")
					}
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	/deep/ .el-table__body-wrapper::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 6px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 8px;
	}

	/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 2px;
		background: #666;
	}

	/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		background: #ccc;
	}

	/deep/ .el-table__fixed-right::before,
	.el-table__fixed::before {
		background-color: unset;
	}
</style>